<template>
    <div class="tab-header">
        <div class="blog-info">
            head
        </div>
        <div class="extra-info">
            <el-avatar :src="avatar.src" :size="50" :alt="avatar.name" />
        </div>
        <div class="blog-section">
            <div :key="url" v-for="(tab, url) in tabs" class="tab-header-item">
                <el-button round="true" size="default " class="tab-header-item-button" type="primary" tag="a" :href=url
                    target="_blank" rel="noopener noreferrer">
                    {{ tab }}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="TabHeader">
import { ref, onMounted } from 'vue';
let tabs = ref({
    "tab1": "Tab 1",
    "tab2": "Tab 2",
    "tab3": "Tab 3",
    "tab4": "Tab 4",
    "tab5": "Tab 5"
})
let avatar = ref({
    src: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    alt: 'avatar',
    name: 'avatar'
})
onMounted(() => {
    let scrollPosition = window.screenY
    window.addEventListener('scroll', () => {
        if (scrollPosition > 10) {
            document.querySelector('.tab-header')?.classList.add('tab-header2')
        } else {
            document.querySelector('.tab-header2')?.classList.remove('tab-header')
        }
    })
})
</script>

<style scoped>
.tab-header {
    position: fixed;
    display: flex;
    height: 50px;
    width: 100%;
    background-color: #f4eeee;
    /* box-shadow: inset 0 -1px 0 0 #e6e6e6; */
}

.tab-header2 {
    position: fixed;
    display: flex;
    height: 50px;
    width: 100%;
    background-color: #e13232;
    /* box-shadow: inset 0 -1px 0 0 #e6e6e6; */
}

.blog-info {
    width: 20%;
    height: 100%;
    /* border: solid 1px #e6e6e6; */
}

.extra-info {
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    /* border: solid 1px #e6e6e6; */
}

.blog-section {
    width: 40%;
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    /* border: solid 1px #e6e6e6; */
}

.tab-header-item {}

.tab-header-item-button {
    background-color: aliceblue;
    color: #000;
}
</style>